<!--
 * @Autor: dingxiaolin
 * @Date: 2021-07-21 16:23:40
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-07-25 20:39:35
-->
<template>
    <a-list itemLayout="horizontal" :dataSource="data">
        <template #renderItem="{ item }">
            <a-list-item>
                <a-list-item-meta>
                    <template #title>
                        <a>{{ item.title }}</a>
                    </template>
                    <template #description>
                        <span class="security-list-description">{{ item.description }}</span>
                        <span v-if="item.value"> : </span>
                        <span class="security-list-value">{{ item.value }}</span>
                    </template>
                </a-list-item-meta>
                <template v-if="item.actions" #actions>
                    <a @click="item.actions.callback">{{ item.actions.title }}</a>
                </template>
            </a-list-item>
        </template>
    </a-list>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, ref, computed, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'
import { useFormModal } from '@/hooks/useFormModal'
import { getFormSchema } from './form-schema'
import { message } from 'ant-design-vue'
import { sysUserUpdatePwd } from '@/api/system/user'
import { getPasswordStrength } from '@/utils/common'
export default defineComponent({
    name: 'securitySettings',
    components: {},
    props: {},
    emits: [],
    setup(props, ctx) {
        const router = useRouter()
        const store = useStore()
        const state = reactive({
            data: [
                {
                    title: '账户密码',
                    description: '当前密码强度',
                    value: '低',
                    actions: {
                        title: '修改',
                        callback: () => {
                            useFormModal({
                                title: '修改密码',
                                formSchema: getFormSchema(),
                                handleOn: async (modelRef, state) => {
                                    if (modelRef.confirm != modelRef.newPassword) {
                                        message.warning('两次输入的密码不匹配')
                                        state.visible = true
                                        return
                                    }
                                    modelRef.id = store.state.user.userInfo.id
                                    await sysUserUpdatePwd(modelRef)
                                    message.success('修改成功')
                                    state.visible = false
                                    var strength = getPasswordStrength(modelRef.newPassword)
                                    if (strength < 3) {
                                        state.data.value = '低'
                                    } else if (strength >= 3 && strength < 5) {
                                        state.data.value = '中'
                                    } else {
                                        state.data.value = '高'
                                    }
                                }
                            })
                        }
                    }
                }
            ]
        })
        onMounted(() => {})
        return {
            ...toRefs(state)
        }
    }
})
</script>

<style lang='scss' scoped>
</style>
